<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="gl"></canvas>
</body>
</html>
<script id="vertex-shader-2d" type="notjs">
    attribute vec4 a_position;
    void main() {
        gl_position = a_position;
    }
</script>

<script id="fragment-shader-2d" type="notjs">
    precision mediump float;
    void main() {
        gl_fragColor = Vec4(1,0,0.5,1);
    }
</script>

<script>
    let canvas = document.querySelector('#gl');
    let gl = canvas.getContext("webgl")
    if (!gl) {
        console.log('你浏览器太老了,没法运行3D效果了')
    }

    function createShader(type, source) {
        let shader = gl.createShader(type); //创建着色器对象
        gl.shaderSource(shader, source);  // 提供数据源
        gl.compileShader(shader); //编译
        let success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
        if (success) return success
        console.log(gl.getShaderInfoLog(shader),'错误信息');
        gl.deleteShader(shader) //删除数据源
    }

    let vertexShderSource = document.querySelector('#vertex-shader-2d').text;
    let fragmentShaderSource = document.querySelector('#fragment-shader-2d').text;

    let vertexShader = createShader(gl.VERTEX_SHADER, vertexShderSource);
    let fragmentShader = createShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
    console.log(vertexShderSource, fragmentShaderSource, '--------')
</script>